<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/viewer/src/viewer.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/viewer/src/viewer.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div v-show="viewerVisible" class="xdh-go-viewer" v-draggable>
    &lt;slot>
      &lt;el-card class="xdh-go-viewer__container">
        &lt;div slot="header" class="xdh-go-viewer__header">
          &lt;span>数据管理器&lt;/span>
          &lt;el-button
            type="text"
            style="float:right;padding:0;"
            circle
            icon="iconfont icon-multiply"
            size="mini"
            @click="close"
          >&lt;/el-button>
        &lt;/div>
        &lt;div class="xdh-go-viewer__content">
          &lt;el-tabs v-model="activeName">
            &lt;el-tab-pane label="节点信息" name="nodes">
              &lt;el-tree :data="nodes" :expand-on-click-node="false" :ref="'nodeTree'" node-key="key">
                &lt;template slot-scope="{node, data}">
                  &lt;div
                    :class="['item', {active: data.key === currKey}]"
                    @click.prevent="findNode(data)"
                  >
                    &lt;span v-if="data.level === 0">
                      {{node.label}}
                      &lt;i
                        class="iconfont icon-inquiry search"
                        @click.prevent="findNode(data)"
                      >&lt;/i>
                    &lt;/span>
                    &lt;span v-else>{{node.label}}&lt;/span>
                  &lt;/div>
                &lt;/template>
              &lt;/el-tree>
            &lt;/el-tab-pane>
            &lt;el-tab-pane label="关系信息" name="links">
              &lt;el-tree :data="links" :expand-on-click-node="false" ref="linkTree">
                &lt;template slot-scope="{node, data}">
                  &lt;div
                    :class="['item', {active: `${data.data.from}_${data.data.to}` === currKey}]"
                    @click.prevent="findNode(data)"
                  >
                    &lt;span v-if="data.level === 0">
                      {{node.label}}
                      &lt;i
                        class="iconfont icon-inquiry search"
                        @click.prevent="findNode(data)"
                      >&lt;/i>
                    &lt;/span>
                    &lt;span v-else>{{node.label}}&lt;/span>
                  &lt;/div>
                &lt;/template>
              &lt;/el-tree>
            &lt;/el-tab-pane>
            &lt;el-tab-pane label="其它" name="others">
              &lt;el-tree :data="others" :expand-on-click-node="false">
                &lt;template slot-scope="{node, data}">
                  &lt;div class="item">
                    &lt;span v-if="data.level === 0">
                      {{node.label}}
                      &lt;i
                        class="iconfont icon-inquiry search"
                        @click.prevent="findNode(data)"
                      >&lt;/i>
                    &lt;/span>
                    &lt;span v-else>{{node.label}}&lt;/span>
                  &lt;/div>
                &lt;/template>
              &lt;/el-tree>
            &lt;/el-tab-pane>
          &lt;/el-tabs>
        &lt;/div>
      &lt;/el-card>
    &lt;/slot>
  &lt;/div>
&lt;/template>
&lt;script>
/**
 * XdhGoViewer 组件
 * @module xdh-go-viewer
 * @description 数据管理器
 */
// import go from 'gojs'
import draggable from '../../../utils/directives/draggable'
export default {
  name: 'XdhGoViewer',
  components: {},
  directives: {
    draggable
  },
  /**
   * 参数属性
   * @property {Object} [diagram=null] go.Diagram对象
   * @property {Boolean} [visible=false] 是否可见
   */
  props: {
    diagram: {
      type: Object,
      default() {
        return null
      }
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      viewerVisible: false,
      activeName: 'nodes',
      nodes: [],
      links: [],
      others: [],
      clickTimeout: null,
      currKey: ''
    }
  },
  computed: {
    style() {
      return {
        width: '800px'
      }
    }
  },
  watch: {
    viewerVisible(val) {
      this.$emit('update:visible', val)
    },
    visible(val) {
      this.viewerVisible = val
      this.reloadDiagram()
    },
    diagram(dig) {
      if (dig) {
        this.unbindEvents()
        setTimeout(() => {
          this.bindEvents()
          this.reloadDiagram()
        }, 100)
      }
    }
  },
  methods: {
    reloadDiagram() {
      let modelJson = this.diagram.model.toJson()
      let model = JSON.parse(modelJson)
      let nodes = [],
        links = []
      if (model.nodeDataArray) {
        nodes = this.getChildren(model.nodeDataArray, 0)
      }
      if (model.linkDataArray) {
        links = this.getChildren(model.linkDataArray, 0)
      }
      let otherObj = {}
      for (let name in model) {
        if (!['nodeDataArray', 'linkDataArray'].includes(name)) {
          otherObj[name] = model[name]
        }
      }
      let others = this.getChildren(otherObj, 0)
      this.nodes = nodes
      this.links = links
      this.others = others
    },
    getChildren(obj, level) {
      if (obj instanceof Array) {
        let arr = []
        obj.forEach(d => {
          let item = { data: d, level: level }
          if (level === 0) {
            if (d.key) {
              item.key = d.key
            } else if (d.from) {
              item.key = `${d.from}_${d.to}`
            }
          }
          let children = this.getChildren(d, level + 1)
          if (children instanceof Array) {
            item.children = children
            item.label = JSON.stringify(d).substr(0, 50)
          } else {
            if (typeof d === 'string') {
              item.label = `${name}:  '${d}'`
            } else {
              item.label = `${name}:  ${d}`
            }
          }
          arr.push(item)
        })
        return arr
      } else if (obj instanceof Object) {
        let arr = []
        for (let name in obj) {
          let d = obj[name]
          let item = { data: d, level: level }
          let children = this.getChildren(d, level + 1)
          if (children instanceof Array) {
            item.children = children
            item.label = `${name}:  ${JSON.stringify(d).substr(0, 50)}`
          } else {
            if (typeof d === 'string') {
              item.label = `${name}:  '${d}'`
            } else {
              item.label = `${name}:  ${d}`
            }
          }
          arr.push(item)
        }
        return arr
      } else {
        return obj
      }
    },
    findNode(item) {
      let nodeData = this.diagram.model.nodeDataArray.find(
        r => r.key === item.data.key
      )
      if (nodeData) {
        let node = this.diagram.findNodeForData(nodeData)
        this.diagram.clearSelection()
        node.isSelected = true
        let rect = node.actualBounds
        this.diagram.centerRect(rect)
        this.currKey = node.data.key
      } else {
        let linkData = this.diagram.model.linkDataArray.find(r => {
          return r.from === item.data.from &amp;&amp; r.to === item.data.to
        })
        if (linkData) {
          let node = this.diagram.findLinkForData(linkData)
          this.diagram.clearSelection()
          if (node) {
            node.isSelected = true
            let rect = node.actualBounds
            this.diagram.centerRect(rect)
            this.currKey = `${node.data.from}_${node.data.to}`
          }
        }
      }
    },
    close() {
      this.viewerVisible = false
    },
    destroy() {
      if (this.$el.parentNode) {
        this.$el.parentNode.removeChild(this.$el)
      }
    },
    objectClick(obj) {
      if (this.clickTimeout) {
        clearTimeout(this.clickTimeout)
      }
      this.clickTimeout = setTimeout(() => {
        let nodeData = obj.subject.part.data
        if (nodeData.key) {
          this.activeName = 'nodes'
          this.currKey = nodeData.key
        } else if (nodeData.from) {
          this.activeName = 'links'
          this.currKey = `${nodeData.from}_${nodeData.to}`
        }
      }, 300)
    },
    objectDbClick(obj) {
      if (this.clickTimeout) {
        clearTimeout(this.clickTimeout)
      }
      this.clickTimeout = setTimeout(() => {
        console.log(obj, 'dbclick')
      }, 300)
    },
    bindEvents() {
      this.diagram.addDiagramListener('ObjectSingleClicked', this.objectClick)
      this.diagram.addDiagramListener('ObjectDoubleClicked', this.objectDbClick)
    },
    unbindEvents() {
      this.diagram.removeDiagramListener(
        'ObjectSingleClicked',
        this.objectClick
      )
      this.diagram.removeDiagramListener(
        'ObjectDoubleClicked',
        this.objectDbClick
      )
    }
  },
  created() {
    this.viewerVisible = this.visible
  },
  mounted() {
    document.body.appendChild(this.$el)
    if (this.diagram) {
      this.reloadDiagram()
    }
  },
  beforeDestroy() {
    this.destroy()
    this.unbindEvents()
  }
}
&lt;/script>
&lt;style type="text/scss" lang="scss" scoped>
&lt;/style></code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-utils_directives_draggable.html">utils/directives/draggable</a></li><li><a href="module-utils_directives_resizable.html">utils/directives/resizable</a></li><li><a href="module-utils_events.html">utils/events</a></li><li><a href="module-utils_storage.html">utils/storage</a></li><li><a href="module-xdh-go.html">xdh-go</a></li><li><a href="module-xdh-go-circle-menu.html">xdh-go-circle-menu</a></li><li><a href="module-xdh-go-draft.html">xdh-go-draft</a></li><li><a href="module-xdh-go-html.html">xdh-go-html</a></li><li><a href="module-xdh-go-layout.html">xdh-go-layout</a></li><li><a href="module-xdh-go-overview.html">xdh-go-overview</a></li><li><a href="module-xdh-go-search.html">xdh-go-search</a></li><li><a href="module-xdh-go-select.html">xdh-go-select</a></li><li><a href="module-xdh-go-snapshot.html">xdh-go-snapshot</a></li><li><a href="module-xdh-go-tool.html">xdh-go-tool</a></li><li><a href="module-xdh-go-tooltiip.html">xdh-go-tooltiip</a></li><li><a href="module-xdh-go-view.html">xdh-go-view</a></li><li><a href="module-xdh-go-viewer.html">xdh-go-viewer</a></li></ul><h3>Classes</h3><ul><li><a href="module-utils_directives_draggable-Draggable.html">Draggable</a></li><li><a href="module-utils_directives_resizable-Resizable.html">Resizable</a></li><li><a href="module-utils_events-Events.html">Events</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-go-view.html#~event:item-click">item-click</a></li><li><a href="module-xdh-go-select.html#~event:on-change">on-change</a></li><li><a href="module-xdh-go-search.html#~event:on-error">on-error</a></li><li><a href="module-xdh-go-circle-menu.html#~event:on-item-click">on-item-click</a></li><li><a href="module-xdh-go.html#~event:on-load-data">on-load-data</a></li><li><a href="module-xdh-go.html#~event:on-ready">on-ready</a></li><li><a href="module-xdh-go-search.html#~event:on-search">on-search</a></li><li><a href="module-xdh-go-snapshot.html#~event:on-snap">on-snap</a></li></ul><h3>Global</h3><ul><li><a href="global.html#animationPool">animationPool</a></li><li><a href="global.html#bindToState">bindToState</a></li><li><a href="global.html#ease">ease</a></li><li><a href="global.html#easeInBack">easeInBack</a></li><li><a href="global.html#easeInBounce">easeInBounce</a></li><li><a href="global.html#easeInCirc">easeInCirc</a></li><li><a href="global.html#easeInCubic">easeInCubic</a></li><li><a href="global.html#easeInElastic">easeInElastic</a></li><li><a href="global.html#easeInExpo">easeInExpo</a></li><li><a href="global.html#easeInOutBack">easeInOutBack</a></li><li><a href="global.html#easeInOutBounce">easeInOutBounce</a></li><li><a href="global.html#easeInOutCubic">easeInOutCubic</a></li><li><a href="global.html#easeInOutQuad">easeInOutQuad</a></li><li><a href="global.html#easeInOutQuart">easeInOutQuart</a></li><li><a href="global.html#easeInOutQuint">easeInOutQuint</a></li><li><a href="global.html#easeInOutSine">easeInOutSine</a></li><li><a href="global.html#easeInQuad">easeInQuad</a></li><li><a href="global.html#easeInQuart">easeInQuart</a></li><li><a href="global.html#easeInQuint">easeInQuint</a></li><li><a href="global.html#easeInSine">easeInSine</a></li><li><a href="global.html#easeOutBack">easeOutBack</a></li><li><a href="global.html#easeOutBounce">easeOutBounce</a></li><li><a href="global.html#easeOutCirc">easeOutCirc</a></li><li><a href="global.html#easeOutCubic">easeOutCubic</a></li><li><a href="global.html#easeOutElastic">easeOutElastic</a></li><li><a href="global.html#easeOutExpo">easeOutExpo</a></li><li><a href="global.html#easeOutQuad">easeOutQuad</a></li><li><a href="global.html#easeOutQuart">easeOutQuart</a></li><li><a href="global.html#easeOutQuint">easeOutQuint</a></li><li><a href="global.html#easeOutSine">easeOutSine</a></li><li><a href="global.html#extendOption">extendOption</a></li><li><a href="global.html#genOption">genOption</a></li><li><a href="global.html#getHandler">getHandler</a></li><li><a href="global.html#handleEvents">handleEvents</a></li><li><a href="global.html#handleParts">handleParts</a></li><li><a href="global.html#horPanel%25E6%25B0%25B4%25E5%25B9%25B3%25E5%25B8%2583%25E5%25B1%2580">horPanel 水平布局</a></li><li><a href="global.html#makePort">makePort</a></li><li><a href="global.html#node%25E8%258A%2582%25E7%2582%25B9%25E5%25AE%259A%25E4%25B9%2589">node 节点定义</a></li><li><a href="global.html#removeGray">removeGray</a></li><li><a href="global.html#setGray">setGray</a></li><li><a href="global.html#shapeParamsBinding">shapeParamsBinding</a></li><li><a href="global.html#spotPanelspot%25E5%25B8%2583%25E5%25B1%2580">spotPanel spot布局</a></li><li><a href="global.html#verPanel%25E5%259E%2582%25E7%259B%25B4%25E5%25B8%2583%25E5%25B1%2580">verPanel 垂直布局</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.3</a> on Tue Nov 05 2019 16:15:35 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
